<template>
    <div class="comment">
        <!-- 头部banner -->
        <hdbanner></hdbanner>
        <div class="comment_body">
            <div class="comment_list">
                <el-divider content-position="left">{{ (total || 0) + ' 条评论' }}</el-divider>
                <div v-for="(item, index) in commentList" :key="'commentList' + index" class="comment_item">
                    <div class="user_portrait">
                        <!-- 头像 -->
                        <img :src="item.user_pic || require('@/assets/static/img/my.png')">
                    </div>
                    <div class="user_body">
                        <div class="info">
                            <!-- 名称 -->
                            <div class="username">
                                {{ item.nickname }}
                            </div>
                            <!-- 内容 -->
                            <div class="userdetail">
                                {{ item.content }}
                            </div>
                        </div>
                        <div class="operation">
                            <div class="date iconfont icon-shijianchuo "></div><span>{{ $moment(item.date, 'YY-MM-DD')
                            }}</span>
                            <div class="say iconfont icon-pinglun"></div><span>{{ item.childs.length }}</span>
                            <div class="reply"><span @click="reply(item)">回复</span></div>
                        </div>
                        <div class="comment_item" v-for="(item2, index2) in item.childs" :key="'childs' + index2">
                            <div class="user_portrait">
                                <img :src="item2.user_pic || require('@/assets/static/img/my.png')">
                            </div>
                            <div class="user_body">
                                <div class="info">
                                    <div class="username">
                                        {{ item2.nickname + '@' + item2.tagname }}
                                    </div>
                                    <div class="userdetail">
                                        {{ item2.content }}
                                    </div>
                                </div>
                                <div class="operation">
                                    <div class="date iconfont icon-shijianchuo "></div>
                                    <span>{{ $moment(item2.date, 'YY-MM-DD') }}</span>
                                    <!-- <div class="say iconfont icon-pinglun"></div><span>{{ item2.childs.length }}</span> -->
                                    <div class="reply"><span @click="reply(item2)">回复</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="notice">
                <div class="speak">
                    <h3>小海螺有话说：</h3>
                    <p v-if="this.$store.state.pageInfo">{{ this.$store.state.pageInfo.affiche }}</p>
                    <el-button type="primary" @click="reply()">立即留言</el-button>
                </div>
                <div class="speak">
                    <!-- <h3>友情链接：</h3>
                    <div class="a_body">
                        <a href="#">我的小博客</a>
                        <a href="#">我的小博客</a>
                        <a href="#">我的小博客</a>
                        <a href="#">我的小博客</a>
                    </div> -->
                </div>
            </div>
        </div>
        <!-- 弹窗 -->
        <el-dialog title="留言" :visible.sync="dialogVisible" width="400px" @close="close">
            <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 7 }" placeholder="请输入内容" v-model="textarea2">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getCommontById, addComment } from "@/api";
import hdbanner from "@/components/hdbanner";

export default {
    name: 'arrange',
    components: {
        hdbanner,
    },
    data() {
        return {
            commentList: [],
            dialogVisible: false,
            textarea2: '',
            dialogRow: null,
            total: 0,
        }
    },
    mounted() {
        this.getCommontById()
    },
    methods: {
        getCommontById() {
            getCommontById({ article_id: 0 }).then(res => {
                this.commentList = res.data.data
                this.total = res.data.total
            })
        },
        close() {
            this.dialogRow = null
            this.textarea2 = ''
        },
        reply(row) {
            // 打开弹窗
            this.dialogRow = null
            this.dialogVisible = true
            this.dialogRow = row
        },
        submit() {
            // 判断有没有登录
            if (!this.$store.state.userInfo) return this.$message.error('请先登录！')
            if (!this.$store.state.userInfo.state) return this.$message.error('请先登录！')
            // 判断输入是空
            if (!this.textarea2) return this.$message.error('请输入！')
            let body = {}
            if (this.dialogRow) {
                // 回复模式
                body.articleid = 0 //当前文章id
                body.lastid = this.dialogRow.lastid != -1 ? this.dialogRow.lastid : this.dialogRow.comment_id // 上级id
                body.userid = this.$store.state.userInfo.user_id// 当前用户id
                body.targetid = this.dialogRow.userid //目标id
                body.date = this.$moment(Date.now())
                body.content = this.textarea2
            } else {
                // 新增模式
                body.articleid = 0 //当前文章id
                body.lastid = -1 // 上级id
                body.userid = this.$store.state.userInfo.user_id// 当前用户id
                body.targetid = -1 //目标id
                body.date = this.$moment(Date.now())
                body.content = this.textarea2
            }
            addComment(body).then(res => {
                if (!res.data.status) {
                    this.$message.error('发布失败')
                } else {
                    this.dialogVisible = false
                    this.getCommontById()
                    this.$message.success('发布成功')
                }
            })

        }
    }
}
</script>



<style lang="less" src="./index.less" scoped></style>